'use client'
import './index.scss'
import React, { useState, useRef} from 'react'
import VideoStore from '@/app/store/video'
import { UploadOutlined, SoundOutlined, MutedOutlined, VideoCameraOutlined, PictureOutlined } from '@ant-design/icons';
import { ColorPicker } from 'antd'
import { debounce } from '@/app/hook/limitation'
import { message } from 'antd'

const ManageVideo: React.FC = () => {

    const { Init, setInit } = VideoStore()
    const [isPlaying, setIsPlaying] = useState(false);
    const videoRef = useRef<HTMLVideoElement>(null);
    const [video_muted, setvideo_muted] = useState(true)
  
    const handleUpload = (event: React.ChangeEvent<HTMLInputElement>, type: string) => {
        const file = event.target.files?.[0];
        if (file && type === 'VideoUrl') {
            const url = URL.createObjectURL(file);
            setInit('VideoUrl', url)
        }
        if (file && type === 'Image') {
            // 检查文件大小（以字节为单位，这里设置为2MB）
            const maxSize = 3 * 1024 * 1024; // 2MB
            if (file.size > maxSize) {
                message.error('图片大小超过3MB，请选择更小的图片或压缩后再上传');
                return;
            }
            const reader: any = new FileReader();
            reader.onloadend = () => {
                setInit('Image', reader.result)
            };
            reader.readAsDataURL(file);
        }
        if (file && type === 'Srt') file.text().then(res => setInit('Srt', res));
    };

    const togglePlay = () => {
        if (videoRef.current) {
            if (isPlaying) videoRef.current.pause();
            else videoRef.current.play();
            setIsPlaying(!isPlaying);
        }
    };

    const Color = debounce((value: any) => setInit('BackgroundColor', value.toHexString()), 100)


    return (
        <div className="manage_video">
            <div className="video_content" style={{ backgroundColor: Init.Type == 'BackgroundColor' ? Init.BackgroundColor : '' }}>
                {
                    Init.VideoUrl && Init.Type == 'VideoUrl' &&
                    <video
                        ref={videoRef}
                        className='background'
                        src={Init.VideoUrl}
                        loop // 循环播放
                        muted={video_muted}   // 静音播放
                        onClick={togglePlay}
                    />
                }
                {
                    Init.Type == 'Image' && Init.Image &&
                    <img src={Init.Image} alt="Uploaded Image" className='background' />
                }

                <div className='operate'>
                    <div>
                        {
                            Init.Type == 'VideoUrl' && <>
                                {video_muted ?
                                    <MutedOutlined onClick={() => setvideo_muted(false)} /> :
                                    <SoundOutlined onClick={() => setvideo_muted(true)} />}
                            </>
                        }

                    </div>
                    <label>
                        <PictureOutlined />
                        <input
                            type="file"
                            accept="image/*"
                            onChange={(e) => { handleUpload(e, 'Image') }}
                            style={{ display: 'none' }}
                        />
                    </label>
                    <label>
                        <VideoCameraOutlined />
                        <input
                            type="file"
                            accept="video/*"
                            onChange={(e) => { handleUpload(e, 'VideoUrl') }}
                            style={{ display: 'none' }}
                        />
                    </label>
                    <div>
                        <ColorPicker defaultValue="#1677ff" onChange={(value) => Color(value)} />
                    </div>
                </div>
            </div>
            <div className="video_srt">
                <div className='operate'>
                    <label>
                        <UploadOutlined />
                        <input
                            type="file"
                            accept=".srt"
                            onChange={(e) => handleUpload(e, 'Srt')}
                            style={{ display: 'none' }}
                        />
                    </label>
                </div>
                <pre className='pre_content'>
                    {Init.Srt}
                </pre>
            </div>
        </div>
    )
}


export default ManageVideo